<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      li {
        font: 22px/30px 'simsun';
        cursor: pointer;
        margin: 5px;
      }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
      $(function () {
        function init() {
          $('ul > li:nth-child(2n-1)').css('background-color', 'yellowgreen')
          $('ul > li:nth-child(2n)').css('background-color', 'skyblue')
        }

        init()

        $('ul').on('mouseenter', 'li', function () {
          init()
          $(this).css('background-color', 'red')
        })
      })
    </script>
  </head>
  <body>
    <ul>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
      <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
  </body>
</html>
